@use "sass:meta";
$mobile-width: 480px;
$tablet-width: 996px;
$desktop-width: 997px;
$desktop-xl-width: 1160px;

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

:root {
  --ifm-font-family-base: "Open Sans", system-ui, -apple-system, Segoe UI,
    Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont,
    "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --ifm-color-primary-light: #21798d;
  --ifm-color-primary: #21798d;
  --ifm-heading-color: #0d0c1b;
  --ifm-hover-overlay: #e1f5fb;
  --ifm-menu-color-active: #21798d;
  --ifm-menu-color-background-active: #e1f5fb;
  --ifm-menu-color-background-hover: #e1f5fb;
  --ifm-menu-color: #4b4b5a;
  --ifm-navbar-background-color: #0d0c1b;
  --ifm-navbar-height: 4.5rem;
  --ifm-navbar-padding-vertical: 0.75rem;
  --ifm-navbar-link-color: rgba(255, 255, 255, 0.75);
  --ifm-toc-link-color: #4b4b5a;
}

html[data-theme="dark"] {
  --ifm-background-color: #131226;
  --ifm-color-primary-light: #57c7e3;
  --ifm-color-primary: #57c7e3;
  --ifm-heading-color: white;
  --ifm-hover-overlay: #2b2f46;
  --ifm-menu-color-active: #57c7e3;
  --ifm-menu-color-background-active: #2b2f46;
  --ifm-menu-color-background-hover: #2b2f46;
  --ifm-menu-color: white;
  --ifm-toc-link-color: white;
}

@mixin mobile {
  @media (max-width: #{$mobile-width}) {
    @content;
  }
}

@mixin tablet {
  @media (max-width: #{$tablet-width}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}

@mixin desktopWide {
  @media (min-width: #{$desktop-xl-width}) {
    @content;
  }
}

.header-github-link {
  height: 35px;
  margin: 0;
  padding: 0;
  background-color: white;
  mask-image: url("/img/github-icon.svg");
  mask-size: 100%;
  width: 30px;

  @include desktop {
    width: 35px;
    text-indent: 40px;
    white-space: nowrap;
    overflow: hidden;
  }

  @include mobile {
    margin: auto;
    html[data-theme="light"] {
      background-color: black;
    }
  }
}

.header-discord-link,
.footer-discord-link,
.footer-x-link {
  background-color: white;
  height: 30px;
  margin: 0;
  mask-image: url("/img/discord-icon.svg");
  mask-position: center;
  mask-size: 35px;
  padding: 0;
  width: 30px;

  @include desktop {
    overflow: hidden;
    text-indent: 40px;
    white-space: nowrap;
    width: 30px;
  }

  @include mobile {
    margin: auto;
  }
}

.announcementBar_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module {
  border-bottom: none !important;
}

.footer-x-link {
  mask-size: 20px;
  mask-image: url("/img/x-icon.svg");
  mask-repeat: no-repeat;
  mask-position: center;
}

html[data-theme="light"] {
  .header-discord-link {
    @include mobile {
      background-color: black;
    }
  }

  .header-github-link {
    @include mobile {
      background-color: black;
    }
  }

  @include mobile {
    .navbar-blog-link {
      color: black;
    }
  }

  .navbar-sidebar__item {
    @include tablet {
      background-color: white;
    }
  }
}

.navbar-blog-link {
  @include mobile {
    justify-content: center;
  }
}

.navbar__items--right {
  gap: 1rem;
}

.navbar__toggle {
  color: white;
  margin-right: 1rem;
}

.navbar__logo {
  height: 48px;
  width: 147px;
}

.dropdown .dropdown__link svg {
  display: none;
}

.dropdown > .navbar__link::after {
  content: "\203A";
  display: inline-block;
  transform: rotate(90deg) !important;
  border: none;
  padding: 0em 0.5em;
}

pre {
  background: #0d0c1b;
  border: 1px solid rgba(75, 75, 90, 0.3);
}

.footer {
  background-color: #0d0c1b;
  color: white;
  padding: 4rem 0 1.5rem;

  .flex {
    display: flex;
  }

  .gap-8 {
    gap: 24px;
  }

  hr {
    background-color: #4b4968;
  }

  .justify-between {
    justify-content: space-between;
  }

  .footer__link-item {
    color: white;
    font-size: 0.875rem;
  }

  .footer__col {
    text-align: center;
  }

  .discord-icon {
    background-color: white;
    mask-image: url("/img/discord-icon.svg");
    mask-size: 100%;
  }
}

.DocCardList--no-description .card p {
  display: none;
}

// adjust style for Dagger Shell tab title
.language-shell > div:nth-child(1) {
  background-color: white;
  color: black;
  font-style: italic;
}
